<template>
	<view class="personalInfo plr15 ">

		<view class="personalBox mt10 bgWhite radius8">

			<uv-form labelPosition="left" :model="personaModel" :rules="personalRules" ref="form">

				<uv-form-item label="城市" borderBottom labelWidth="120rpx">
					<view class="flex1 align-center justify-end gray5" @click="showAreaPicker">
						<text>{{area}}</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</uv-form-item>
				
				<uv-form-item label="名称" borderBottom labelWidth="120rpx">
					<uv-input v-model="title" border="none" placeholder="请输入擂台主题(15字以内)">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="类型" borderBottom labelWidth="120rpx">
					<view class="flex1 align-center justify-end gray5" @click="showLabelPicker()">
						<text>{{typeName}}</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</uv-form-item>
				<uv-form-item label="人数" borderBottom labelWidth="120rpx">
                    <view class="justify-end">
                        <uv-input v-model="num" type="number" border="none" placeholder="请输入开擂台人数">
                        </uv-input>人
                    </view>
				
				</uv-form-item>
				<uv-form-item label="段位" borderBottom labelWidth="120rpx">
					<view class="flex1 align-center justify-end gray5" @click="showLevelPicker()">
						<text>{{level}}</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view>
				</uv-form-item>

				<uv-form-item label="时间" borderBottom labelWidth="120rpx">
					<!-- <view class="flex1 align-center justify-end gray5" @click="showTimePicker()">
						<text>{{timeType}}</text>
						<uv-icon name="arrow-right"></uv-icon>
					</view> -->
                    <uni-datetime-picker :start="minDate" returnType="timestamp"  type="datetime" v-model="single" @change="changeLog"
                    			><view class="flex1 align-center justify-end gray5"> {{timeType}}  <uv-icon name="arrow-right"></uv-icon></view></uni-datetime-picker
                    		>
				</uv-form-item>
				<view class="">
					<view class="mt10 mb10">
						备注
					</view>
					<textarea name="" v-model="beizhu" placeholder="请输入备注说明(20字以内)" id="" cols="30" rows="10"></textarea>
					
				</view>
				

			</uv-form>
		</view>

		<view class="save_btn" @click="save">
			确认发布
		</view>

		<uv-picker ref="areaPicker" :columns="[areaRrand]" keyName="name" @change="carChange"
			@confirm="areaConfirm"></uv-picker>
		<uv-picker ref="labelPicker" keyName="title" :columns="[labelList]" @confirm="labelConfirm"></uv-picker>
		<uv-picker ref="genderPicker" keyName="title" :columns="[genderList]" @confirm="genderConfirm"></uv-picker>
		<uv-datetime-picker ref="datetimePicker" :minDate="minDate" v-model="yuyue_time" mode="datetime" @confirm="timeConfirm">
		</uv-datetime-picker>
		<uv-picker ref="mallPicker" keyName="name" :columns="[mallList]" @confirm="mallConfirm"></uv-picker>
		<uv-picker ref="levelPicker" keyName="name" :columns="[levelList]" @confirm="levelConfirm"></uv-picker>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				personalRules: {},
				areaRrand: [],
				genderList: [],
				columnData: [],
				area: "请选择",
				mallList: [],
				mallName: "请选择",
				time: '请选择',
				typeName: "请选择",
				timeType: "请选择",
                single:"",
				checkboxValue: [],
				labelList: [],
				label_id: "",
				shop_id: "",
				keyword: "",
				level: "请选择",
				beizhu:"",
				title:"",
				yuyue_time: null,
				minDate:new Date().getTime(),
                Number:( new Date().getTime() ),
				num:null,
				levelList: [{
						name: '1-3段',
						id: 1
					},
					{
						name: '3-5段',
						id: 2
					},
					{
						name: '5-7段',
						id: 3
					},
					{
						name: '7-9段',
						id: 4
					},
                    {
                    	name: '9-11段',
                    	id: 5
                    },
				]
			};
		},
		onReady() {

		},
		onLoad() {
			this.getArea()
			this.getCate()

		},
		methods: {
            changeLog(e){
              console.log(e)  
              // this.timeType=e
              this.yuyue_time = e
              this.timeType = this.$utils.formatDateTime(e)
            },
			async getCate() {
				const list = await this.$api.labelLsts()
				console.log(list)
				this.labelList = list.data

			},
			async getUserInfo() {
				const {
					data
				} = await this.$api.userinfo()
				// if(data.area&&this.AreaData&&this.AreaData.length){
				//     this.AreaData.map(item=>{
				//         item.child.map(i=>{
				//             if(i.id==data.area){
				//                 this.area = i.name
				//             }
				//         })
				//     })    
				// }
				this.area = data.areaname
				this.personaModel = data
			},
			areaConfirm(e) {
				console.log(e)
				this.area = e.value[0].name
				this.area_id = e.value[0].id
                    

			},
			mallConfirm(e) {
				console.log(e)
				this.mallName = e.value[0].name
				this.shop_id = e.value[0].id
			},
			levelConfirm(e) {
				this.level = e.value[0].name
			},
			labelConfirm(e) {
				console.log(e)
				this.typeName = e.value[0].title
				this.label_id = e.value[0].id

			},
			timeConfirm(e) {
				console.log(e)
				this.yuyue_time = e.value
				this.timeType = this.$utils.formatDateTime(e.value)
			},

			showAreaPicker() {
				this.$refs.areaPicker.open()
			},
			showMallPicker() {
				this.$refs.mallPicker.open()
			},
			showLabelPicker() {
				this.$refs.labelPicker.open()
			},
			showLevelPicker() {
				this.$refs.levelPicker.open()
			},
			showTimePicker() {
				this.$refs.datetimePicker.open()
			},
		
			async getArea() {
				let data = await this.$api.getArea()
				console.log(data)
				this.areaRrand = data.data
			},
			toIndex() {

			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

			async save() {
				if(this.loading) return 
				this.loading = true
				const res = await this.$api.arenaAdd({
					area_id:this.area_id,
					title:this.title,
					label_id:this.label_id,
					level:this.level,
					beizhu:this.beizhu,
					num:this.num
				})
				

				if (res.code == 1) {
					this.loading=false
					this.$utils.msg('操作成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 800)
				} else {
					this.loading=false
					this.$utils.msg(res.msg)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		margin-bottom: 44rpx;
		font-size: 28rpx;
		color: #666666;

		.notice {
			margin: 64rpx 0 20rpx;
			font-size: 48rpx;
			color: #000000;
			line-height: 54rpx;
		}

	}

	.personalInfo {


		position: relative;

		.personalBox {
			padding: 40rpx 48rpx 62rpx 48rpx;

		}

		.save_btn {
			width: 100%;
			height: 90rpx;
			margin-top: 52rpx;
			margin-bottom: 40rpx;
			background: #2CC6A1;
			border-radius: 8rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90rpx;
		}

	}
</style>